<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../umd/d3plus-core.full.js"></script>

</head>

<body>

</body>

<script>

var popData = [
  {id: "01", population: 4830620},
  {id: "08", population: 5278906},
  {id: "16", population: 1616547},
  {id: "24", population: 5930538},
  {id: "29", population: 6045448},
  {id: "30", population: 1014699},
  {id: "35", population: 2084117},
  {id: "40", population: 3849733},
  {id: "47", population: 6499615},
  {id: "56", population: 579679}
];

const stateToFIPS = {
  AL: "01",
  AK: "02",
  AZ: "04",
  AR: "05",
  CA: "06",
  CO: "08",
  CT: "09",
  DE: "10",
  DC: "11",
  FL: "12",
  GA: "13",
  HI: "15",
  ID: "16",
  IL: "17",
  IN: "18",
  IA: "19",
  KS: "20",
  KY: "21",
  LA: "22",
  ME: "23",
  MD: "24",
  MA: "25",
  MI: "26",
  MN: "27",
  MS: "28",
  MO: "29",
  MT: "30",
  NE: "31",
  NV: "32",
  NH: "33",
  NJ: "34",
  NM: "35",
  NY: "36",
  NC: "37",
  ND: "38",
  OH: "39",
  OK: "40",
  OR: "41",
  PA: "42",
  RI: "44",
  SC: "45",
  SD: "46",
  TN: "47",
  TX: "48",
  UT: "49",
  VT: "50",
  VA: "51",
  WA: "53",
  WV: "54",
  WI: "55",
  WY: "56",
  AS: "60",
  GU: "66",
  MP: "69",
  PR: "72",
  VI: "78"
};

const nameLookup = Object.keys(stateToFIPS)
  .reduce((obj, d) => {
    obj[stateToFIPS[d]] = d;
    return obj;
  }, {});

var chart = new d3plus.Geomap()
  .config({
    colorScale: "population",
    colorScaleConfig: {
      color: "#702877"
    },
    data: popData,
    // projection: "geoAzimuthalEqualArea",
    // projectionRotate: [-90, 0],
    ocean: "transparent",
    shapeConfig: {
      Path: {
        label: d => d.properties ? d.properties.iso3166_2 : nameLookup[d.id]
      }
    },
    topojson: "./us_states_hexgrid.json",
    topojsonId: d => stateToFIPS[d.properties.iso3166_2],
    tiles: false,
    // topojsonKey: "countries",
    // topojsonFilter: d => d.id === "rus"
    // topojson: "https://d3plus.org/topojson/states.json",
  })
  .render();

</script>

</html>
